<modal-dialog dialog-title="vm.dialogTitle" message="vm.dialogMessage" buttons="vm.overwriteDialogButtons"></modal-dialog>
<div class="import-main">
  <div class="title_text margin_bottom_15 text_center">{{vm.header}}</div>
  <div ng-if="vm.data.connectedToRepo" class="subtitle_text margin_bottom_15 text_center">{{vm.repositoryNotification}}</div>
  <div class="import-middle">
    <div class="margin_bottom_15">
      <label for="clusterName" class="margin_bottom_5 text_left">{{::vm.clusterNameLabel}}</label>
      <input id="clusterName" type="text" ng-model="vm.data.model.name" ng-keydown="vm.onNameKeyDown($event)" ng-change="vm.onNameChange()" autofocus/>
    </div>
    <div class="import-scroll-form">
      <div class="import-shim margin_bottom_15">
        <div class="leftHalf">
          <label for="shimVendor" class="margin_bottom_5 text_left">{{::vm.importLabel}}</label>
          <select-box id="shimVendor" type="vm.shimVendor" options="vm.shimVendors" on-select="vm.onSelectShim(value)"></select-box>
        </div>
        <div class="rightHalf">
          <label for="shimVersion" class="margin_bottom_5 text_left">{{::vm.versionLabel}}</label>
          <select-box id="shimVersion" type="vm.shimVersion" options="vm.shimVersions" on-select="vm.onSelectShimVersion(value)"></select-box>
        </div>
      </div>
      <div class="margin_bottom_15">
        <multi-browse label="vm.importFolderLabel" model="vm.siteFiles"></multi-browse>
      </div>
      <fieldset>
        <legend>{{::vm.hdfsLabel}}</legend>
        <credentials username="vm.data.model.hdfsUsername" password="vm.data.model.hdfsPassword"></credentials>
      </fieldset>
    </div>
    <controls buttons="vm.buttons" help-link="vm.helpLink" data="vm.data"></controls>
  </div>
</div>
